<template>
	<!-- <view  class="content" :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'"> -->
	<view class="content" :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'">	
		<view :style="{height:$store.state.StatusBar.statusBar + 'px'}">
		</view>
	
		<view v-if="isWXflag ==true" style="height: 100rpx;"></view>
		
		<view class="z_index2 flex_r fa_c top" >
			<view class="top-img" >
				<image class="img" :src="info.pic" mode="aspectFill"  @click="avaterChange"></image>
			</view>
			<view class="flex1 flex_r fa_c top-infr">
				<view class="flex1" @click="to('/pages/m-pages/m-user-info/index?my=1&&userid='+info.id)">
					<view class="flex_r fa_c top-infr-name">
						<view class="" style="color:#fff">
							{{info.nick}}
						</view>
						<view class="top-infr-icon">
						</view>
					</view>
					<view class="color__ text_26">
						ID:{{info.tengxuncode}}
					</view>
				</view>
				<view class="top-infr-icon"  @tap="to('/pages/m-pages/m-vip/index')">
					<image  class="xufei" :src="$c.config.media + 'yuemini/xufei.png'" />
				</view>
			</view>
		</view>

        <view class="warp">
            <view class="func">
                <view class="func-item"  v-if="openqianbao==1"  @click="to('/pages/m-pages/m-balance/index')">
                    <view class="left">
                        <image class="func-item-img"  :src="$c.config.media + 'yuemini/hei.png'" ></image>

                        <view class="func-item-text">我的钱包</view>
                    </view>
                    <image class="jian_icon" :src="$c.config.media + 'yuemini/jian_icon.png'" />
                </view>
				
			<!-- 	<view class="func-item"   @tap="handleRouter('/pages/m-pages/m-real/index')">
				    <view class="left">
				        <image class="func-item-img" :src="$c.config.media + 'yuemini/hei.png'" ></image>
				
				        <view class="func-item-text">实名认证</view>
				    </view>
				    <image class="jian_icon" :src="$c.config.media + 'yuemini/jian_icon.png'" />
				</view> -->
				
    <!--            <view class="func-item"   @tap="handleRouter('/pages/m-pages/m-vip/index')">
                    <view class="left">
                        <image class="func-item-img"  :src="$c.config.media + 'yuemini/hei.png'" ></image>

                        <view class="func-item-text">会员中心</view>
                    </view>
                    <image class="jian_icon" :src="$c.config.media + 'yuemini/jian_icon.png'" />
                </view> -->
				
                <view class="func-item"   @tap="handleRouter('/pages/m-pages/m-visitor/index?currentIndex=1')">
                    <view class="left">
                        <image class="func-item-img" :src="$c.config.media + 'yuemini/love.png'"></image>

                        <view class="func-item-text">我喜欢的</view>
                    </view>
                    <image class="jian_icon" :src="$c.config.media + 'yuemini/jian_icon.png'" />
                </view>
                <view class="func-item"   @tap="handleRouter('/pages/m-pages/m-visitor/index?currentIndex=0')">
                    <view class="left">
                        <image class="func-item-img" :src="$c.config.media + 'yuemini/lishi.png'"></image>

                        <view class="func-item-text">历史访客</view>
                    </view>
                    <image class="jian_icon" :src="$c.config.media + 'yuemini/jian_icon.png'" />
                </view>
				
      <!--          <view class="func-item"   @tap="handleRouter('/pages/m-pages/m-login/agreement')">
                    <view class="left">
                        <image class="func-item-img" :src="$c.config.media + 'yuemini/huifu.png'" ></image>

                        <view class="func-item-text">协议</view>
                    </view>
                    <image class="jian_icon" :src="$c.config.media + 'yuemini/jian_icon.png'" />
                </view> -->
				
                <view class="func-item"   @click="kefu()">
                    <view class="left">
                        <image class="func-item-img" :src="$c.config.media + 'yuemini/feng.png'"></image>

                        <view class="func-item-text">在线客服</view>
                    </view>
                    <image class="jian_icon" :src="$c.config.media + 'yuemini/jian_icon.png'" />
                </view>
				
                <view class="func-item"  @tap="handleRouter('/pages/m-pages/m-settle/index')">
                    <view class="left">
                        <image class="func-item-img" :src="$c.config.media + 'yuemini/shezhi.png'" ></image>

                        <view class="func-item-text">设置</view>
                    </view>
                    <image class="jian_icon" :src="$c.config.media + 'yuemini/jian_icon.png'" />
                </view>
				
            </view>
		</view>
<!-- 		<view class="flex_r fa_c z_index2 text_22 member" @tap="to('/pages/m-pages/m-vip/index')">
			<view class="member-bc">
				<image class="img" src="./img/ic_mine_vip_bg.png" mode="aspectFill"></image>
			</view>
			<view class="flex_r fa_c flex1 z_index2">
				<view class="member-img">
					<image class="img" src="./img/ic_mine_vip.png" mode="aspectFill"></image>
				</view>
				<view v-if="info.vipMap.isVip" class="" style="color: #fafafa;">
					您已开通会vip,将于{{info.vipMap.vipEndDate}}过期
				</view>
				<view v-else class="" style="color: #fafafa;">
					开通贵族|享文字免费畅聊
				</view>
			</view>
			<view class="icon_ z_index2">
				<view class="" style="color: #c19c73;" v-if="info.vipMap.isVip">
					立即续费
				</view>
				<view class="" style="color: #c19c73;" v-else>
					立即开通
				</view>
				<view class="member-icon" >
					<image class="img" src="./img/ic_mine_arrow.png" mode="aspectFill"></image>
				</view>
			</view>
		</view> -->

<!-- 		<view class="z_index2 fun">
			<view class="flex_r fun-box">
				<view class="flex_c_c fun-item" @click="open">
					<view class="fun-item-img">
						<image class="img" src="./img/ic_mine_sign.png" mode="aspectFill"></image>
					</view>
					<view class="text_22 color__ fun-item-title">
						每日签到
					</view>
				</view>
				<view class="flex_c_c fun-item" @click="to('/pages/m-pages/m-balance/index')">
					<view class="fun-item-img">
						<image class="img" src="./img/ic_mine_wallet.png" mode="aspectFill"></image>
					</view>
					<view class="text_22 color__ fun-item-title">
						我的钱包
					</view>
				</view>
			</view>
		</view> -->
<!-- 
		<view class="z_index2 fun">
			<view class="fun-title">
				常用功能
			</view>
			<view class="flex_r fun-box">
				<view class="flex_c_c fun-item" 
					@tap="handleRouter('/pages/m-pages/m-real/index')">
					<view class="fun-item-img">
						<image class="img" src="./img/ic_mine_shimirenzhen.png" mode="aspectFill"></image>
					</view>
					<view class="text_22 color__ fun-item-title">
						实名认证
					</view>
				</view>
				<view class="flex_c_c fun-item" 
					@tap="handleRouter('/pages/m-pages/m-vip/index')">
					<view class="fun-item-img">
						<image class="img" src="./img/ic_mine_huiyuanzhongxin.png" mode="aspectFill"></image>
					</view>
					<view class="text_22 color__ fun-item-title">
						会员中心
					</view>
				</view>
				<view class="flex_c_c fun-item" 
					@tap="handleRouter('/pages/m-pages/m-visitor/index')">
					<view class="fun-item-img">
						<image class="img" src="./img/ic_mine_look_me.png" mode="aspectFill"></image>
					</view>
					<view class="text_22 color__ fun-item-title">
						谁看过我
					</view>
				</view>
				<view class="flex_c_c fun-item" 
					@tap="handleRouter('/pages/m-pages/m-login/agreement')">
					<view class="fun-item-img">
						<image class="img" src="./img/ic_mine_xieyi.png" mode="aspectFill"></image>
					</view>
					<view class="text_22 color__ fun-item-title">
						协议
					</view>
				</view>
				<view class="flex_c_c fun-item" 
					@tap="kefu">
					<view class="fun-item-img">
						<image class="img" src="./img/ic_mine_kefu.png" mode="aspectFill"></image>
					</view>
					<view class="text_22 color__ fun-item-title">
						在线客服
					</view>
				</view>
				<view class="flex_c_c fun-item" 
					@tap="handleRouter('/pages/m-pages/m-settle/index')">
					<view class="fun-item-img">
						<image class="img" src="./img/ic_mine_set.png" mode="aspectFill"></image>
					</view>
					<view class="text_22 color__ fun-item-title">
						设置
					</view>
				</view>
			</view>
		</view> -->




		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="popup-bc">
					<image class="img" src="./img/ic_sign_bg.png" mode="aspectFill"></image>
				</view>
				<view class="flex_r fa_c z_index2 popup-remind">
					<view class="text_24">
						签到提醒
					</view>
					<view class="flex_r remind" @click="onRemind">
						<view class="remind-str" :class="{flex1:isRemind}"></view>
						<view class="remind-item"></view>
					</view>
				</view>

				<view class="flex_c z_index2 fj_c title">
					<view class="text_36">
						已连续签到0天
					</view>
					<view class="text_24">
						连续签到7日大礼
					</view>
				</view>

				<view class="z_index2 list">
					<view class="flex_c_c list-item"
						:class="[`fingerboard-item-${index}`,index == 0 ? 'label_item' : '']"
						v-for="(item,index) in 7">
						<view class="list-item-img">
							<image class="img" src="./img/task_zuanshi.png" mode="aspectFill"></image>
						</view>
						<view class="text_28 label_item_text">
							钻石+{{index}}
						</view>
					</view>
				</view>

				<view class="z_index2 button size_white size_white">
					签到
				</view>

			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		to
	} from '@/utils/index.js';
	export default {
		data() {
			return {
				$c: this.$c,
				isRemind: false,
				isWXflag:false,
				openqianbao:1,
				vipopen:0,
				info: {},
				imageurl:'',
				funList1: [
				// {
				// 	name: '任务中午',
				// 	icon: require('./img/ic_mine_kefu.png')
				// },
				{
					name: '我的钱包',
					icon: require('./img/ic_mine_wallet.png')
				}
				// ,{
				// 	name: '装扮商城',
				// 	icon: require('./img/ic_mine_shop.png')
				// },
				],
				funList2: [
					// {
					// 	name: '实名认证',
					// 	path: '/im/home/install/install',
					// 	icon: require('./img/ic_mine_shimirenzhen.png')
					// },
					// {
					// 	name: '会员中心',
					// 	path: '/im/home/install/install',
					// 	icon: require('./img/ic_mine_huiyuanzhongxin.png')
					// },'
					// {
					// 	name: '谁看过我',
					// 	path: '/im/home/install/install',
					// 	icon: require('./img/ic_mine_look_me.png')
					// },
					// {
					// 	name: '协议',
					// 	path: '/im/home/install/install',
					// 	icon: require('./img/ic_mine_xieyi.png')
					// },
					// {
					// 	name: '在线客服',
					// 	path: '/im/home/install/install',
					// 	icon: require('./img/ic_mine_kefu.png')
					// },
					{
						name: '设置',
						path: '/im/personal/personal',
						icon: require('./img/ic_mine_set.png')
					}
				]
			}
		},
		onLoad() {},
		onShow() {
			// console.log(this.$c+'*******');
			// console.log(this.$c.config);
			
			this.vipopen =uni.getStorageSync('vipopen');
			this.openqianbao = uni.getStorageSync('qianbao');
			// #ifdef MP-WEIXIN
				
		     this.isWXflag =true;			
			// #endif
			
			this.getInfo();
		},
		methods: {
			to,
			onRemind() {
				this.isRemind = !this.isRemind
			},
			avaterChange(){
				uni.chooseImage({
					count: 1, //默认9
					success: async (chooseImageRes) => {
						// this.data.avatar = res.tempFilePaths[0];
						const tempFilePaths = chooseImageRes.tempFilePaths;
				
						// console.log(tempFilePaths);
				
						// self.imageurl = res.tempFilePaths[0]; 192.168.2.218 api.ptszyxx.com
						let token =	uni.getStorageSync('token');		
						uni.uploadFile({
							url: 'https://api.ptszyxx.com/app/geren/uppic',
					        filePath: tempFilePaths[0],
							name: 'image', // 类型
							header: {
								'token': token, //头像token，参考返回数据
							},
							formData: {
				
								// token:uni.getStorageSync('token'), //头像token，参考返回数据
				
								// openid: this._settingConfig.openid
				
								// type: Object, // 后台需要的参数,type:1是图片、type:2是视频
				
								 // path: chooseImageRes.tempFiles[0], // 后台需要的给他们路径
							},
							success: (uploadFileRes) => {
								var stra = JSON.parse(uploadFileRes.data);
								//console.log('*******uploadFileRes.data:'+uploadFileRes.data);
								// this.imageurl = stra.data;
								this.getInfo();
								//console.log('*******imageurl:'+this.imageurl);
							},
							fail: e => {
				
							}
						});
				
					}
				})
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			kefu(){
				uni.showModal({
					title:'客服',
					content: `客服QQ：2471997595 工作时间9：00-18：00`
				})
			},
			handleRouter(path) {
				uni.navigateTo({
					url: path,
				});
			},
			async getInfo() {
				let res = await this.$c.post('/app/usermessage/getMessage')
				if (res.code == 0) {
					this.info = res.data
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.popup {
		position: relative;
		box-sizing: border-box;
		padding: 20rpx;
		width: 640rpx;
		border-radius: 26rpx;
		overflow: hidden;
		background-image: linear-gradient(to top, #fff, #f4fff1);
		.popup-bc {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
		.popup-remind {
			height: 100rpx;
			margin-left: 20rpx;

			.remind {
				margin-left: 20rpx;
				width: 110rpx;
				height: 40rpx;
				border-radius: 20rpx;
				background-color: #dcdcdc;

				.remind-str {
					transition: all 0.3s;
				}

				.remind-item {
					position: relative;
					top: -10rpx;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background-color: #efefef;
				}
			}
		}

		.title {
			height: 120rpx;
			margin-left: 20rpx;
		}

		.list {
			width: calc(100% - 40rpx);
			margin: 0 auto;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: 200rpx 200rpx;
			grid-gap: 8px;

			.list-item {
				border-radius: 20rpx;
				background-image: linear-gradient(to left, #f5f5ff, #f5f5ff);

				.list-item-img {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin-bottom: 20rpx;
				}
			}

			.label_item {
				background-image: linear-gradient(to left, #c787ff, #fdaeff, #fdaeff);
				
				.label_item_text {
					color: #fff
				}
			}

			.fingerboard-item-6 {
				grid-column: 3 / 5;
			}
		}

		.button {
			width: 100%;
			height: 80rpx;
			border-radius: 20rpx;
			text-align: center;
			line-height: 80rpx;
			margin-top: 30rpx;
			background-color: #191923;
		}

	}

	.page {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff);
	}

	.top {
		width: calc(100% - 60rpx);
		height: 180rpx;
		margin: 0 auto;

		.top-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 20rpx;
		}

		.top-infr {
			.top-infr-name {}

			.top-infr-icon {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-left: 20rpx;
			}
		}
	}


	.member {
		position: relative;
		box-sizing: border-box;
		padding: 30rpx;
		width: calc(100% - 60rpx);
		height: 140rpx;
		border-radius: 20rpx;
		margin: 0 auto 30rpx auto;
		background-color: #fff;
		overflow: hidden;

		.member-bc {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 0;
		}

		.member-img {
			width: 44rpx;
			height: 44rpx;
			margin-right: 20rpx;
			margin-left: 10rpx;
		}

		.member-icon {
			width: 40rpx;
			height: 40rpx;
			margin-left: 10rpx;
		}
	}


	.fun {
		box-sizing: border-box;
		padding: 20rpx;
		width: calc(100% - 60rpx);
		margin: 0 auto 30rpx auto;
		border-radius: 20rpx;
		background-color: #fff;

		.fun-title {
			width: 100%;
			height: 50rpx;
		}

		.fun-box {
			box-sizing: border-box;
			width: 100%;
			padding: 0rpx 10rpx;
			flex-wrap: wrap;

			.fun-item {
				width: 25%;
				box-sizing: border-box;
				padding: 20rpx 0;

				.fun-item-img {
					width: 70rpx;
					height: 70rpx;
					margin-bottom: 10rpx;
				}

				.fun-item-title {}
			}

		}

	}
	.content {
	    width: 750rpx;
	    /* #ifdef H5 */
	    min-height: calc(100vh - 88rpx);
	    /* #endif */
	    /* #ifdef MP */
	    min-height: 100vh;
	    /* #endif */
		/* #ifdef APP-PLUS */
		min-height: 100vh;
		/* #endif */
	
	    background-size: 750rpx 100vh;
	    background-position: 0 0;
	
	    .xufei {
	        width: 158rpx;
	        height: 56rpx;
	        display: block;
			position:absolute;
			right:10rpx;
	    }
		
		
		
	    .warp {
	        width: 694rpx;
	        margin: 0 auto;
	
	
			.func {
				.func-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
			
					width: 694rpx;
					height: 120rpx;
					background: rgba(255, 255, 255, 0.06);
					border-radius: 24rpx;
					margin-top: 28rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
			
					.left {
						display: flex;
			
						.func-item-img {
							width: 48rpx;
							height: 48rpx;
							display: block;
						}
			
						.func-item-text {
							height: 28rpx;
							font-size: 32rpx;
							font-weight: 400;
							color: #ffffff;
							line-height: rpx;
							font-size: 30rpx;
							margin-left: 20rpx;
						}
					}
			
					.jian_icon {
						width: 14rpx;
						height: 24rpx;
						display: block;
					}
				}
			}
	    
	
	        .user-avther {
	            display: flex;
	            justify-content: space-between;
	            align-items: center;
	
	            .left {
	                display: flex;
	                width: 500rpx;
	
	                .avther-image {
	                    width: 124rpx;
	                    height: 124rpx;
	                    overflow: hidden;
	                    margin-right: 20rpx;
	                    position: relative;
	
	                    image {
	                        width: 124rpx;
	                        height: 124rpx;
	                        border-radius: 124rpx;
	                        display: block;
	                    }
	
	                    .editicon {
	                        position: absolute;
	                        width: 36rpx;
	                        height: 36rpx;
	                        display: block;
	                        z-index: 999;
	                        right: 12rpx;
	                        bottom: 0;
	                    }
	                }
	
	                .name {
	                    .nick-name {
	                        font-size: 32rpx;
	                        font-weight: 600;
	                        color: #fff;
	                        line-height: 44rpx;
	                    }
	
	                    .user-id {
	                        height: 44rpx;
	                        font-size: 26rpx;
	                        color: #7b7b7b;
	                        line-height: 44rpx;
	                    }
	
	                    .copy {
	                        margin-left: 16rpx;
	                        width: 28rpx;
	                        height: 28rpx;
	                    }
	                }
	            }
	
	        }
	
	        .renzhen-vip {
	            width: 700rpx;
	            margin: 0 auto;
	            height: 148rpx;
	            // background: #ffffff;
	            display: flex;
	            justify-content: space-between;
	            align-items: center;
	            border-radius: 16rpx;
	
	            .renzhen,
	            .vip {
	                flex: 1;
	                display: flex;
	                justify-content: space-between;
	                // padding: 0 20rpx;
	                box-sizing: border-box;
	
	                // .item-title {
	                //     height: 44rpx;
	                //     font-size: 32rpx;
	                //     font-weight: 600;
	                //     color: #333333;
	                //     line-height: 44rpx;
	                // }
	
	                // .item-desc {
	                //     height: 54rpx;
	                //     font-size: 24rpx;
	                //     font-weight: 400;
	                //     color: #c2c2c2;
	                //     line-height: 54rpx;
	                // }
	
	                .icon {
	                    width: 330rpx;
	                    height: 148rpx;
	                    display: block;
	                }
	            }
	        }
	
		}
	}
</style>